{extend name="../../admin/view/main"}

{block name='content'}
<form class="layui-form layui-card" action="{:request()->url()}" data-auto="true" method="post" autocomplete="off">
    <div class="layui-card-body padding-40">

        <label class="layui-form-item relative block">
            <span class="color-green font-w7">支付名称</span>
            <span class="color-desc margin-left-5">Payment Name</span>
            <input class="layui-input" required placeholder="请输入支付名称" maxlength="50" name="name" value="{$vo.name|default=''}"/>
            <span class="help-block"><b>必填，</b>请填写支付参数名称，通道名称尽量不要重复，字符不要太长一般4-6个汉字</span>
        </label>

        <div class="layui-form-item">
            <span class="color-green font-w7 label-required-prev">支付方式</span>
            <span class="color-desc margin-left-5">Payment Channel</span>
            <label class="block full-width">
                {empty name='vo.type'}
                <select name="type" class="layui-select" lay-search lay-filter="payment-type">
                    {foreach $payments as $k=>$v}{if isset($vo.type) and $vo.type eq $k}
                    <option selected value="{$k}">{$v.name} ( {$v.allow} )</option>
                    {else}
                    <option value="{$k}">{$v.name} ( {$v.allow} )</option>
                    {/if}{/foreach}
                </select>
                {else}
                <select name="type" disabled class="layui-select" lay-filter="payment-type">
                    {foreach $payments as $k=>$v}{if isset($vo.type) and $vo.type eq $k}
                    <option selected value="{$k}">{$v.name} ( {$v.allow} )</option>
                    {else}
                    <option value="{$k}">{$v.name} ( {$v.allow} )</option>
                    {/if}{/foreach}
                </select>
                <input type="hidden" name="type" value="{$vo.type}">
                {/empty}
                <span class="help-block"><b>必选，</b>请选择预置的支付方式，支付参数创建之后不能修改，请谨慎选择并配置参数</span>
            </label>
        </div>

        <div data-payment-type="wechat" class="layui-hide">{include file='shop_payment/form_wechat'}</div>
        <div data-payment-type="alipay" class="layui-hide">{include file='shop_payment/form_alipay'}</div>
        <div data-payment-type="joinpay" class="layui-hide">{include file='shop_payment/form_joinpay'}</div>

        <div class="layui-form-item relative layui-hide">
            <span class="color-green font-w7">支付描述</span>
            <span class="color-desc margin-left-5">Payment Remark</span>
            <label class="relative block">
                <textarea class="layui-textarea" placeholder="请输入支付描述" name="remark">{$vo.remark|default=''}</textarea>
            </label>
        </div>

        <div class="hr-line-dashed"></div>
        {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}
        {notempty name='vo.code'}<input type='hidden' value='{$vo.code}' name='code'>{/notempty}

        <div class="layui-form-item text-center">
            <button class="layui-btn" type='submit'>保存数据</button>
            <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-history-back>取消编辑</button>
        </div>

    </div>

</form>
{/block}

{block name='script'}
<script>
    (function () {

        layui.form.render();

        apply({value: $('select[name=type]').val()});
        layui.form.on('select(payment-type)', apply);

        function apply(data) {
            if (data.value.indexOf('wechat') > -1) {
                $('[data-payment-type]').not($('[data-payment-type="wechat"]').removeClass('layui-hide')).addClass('layui-hide');
            } else if (data.value.indexOf('alipay') > -1) {
                $('[data-payment-type]').not($('[data-payment-type="alipay"]').removeClass('layui-hide')).addClass('layui-hide');
            } else if (data.value.indexOf('joinpay') > -1) {
                $('[data-payment-type]').not($('[data-payment-type="joinpay"]').removeClass('layui-hide')).addClass('layui-hide');
            } else {
                $('[data-payment-type]').addClass('layui-hide');
            }
        }

    })();
</script>
{/block}